<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>
	<style type="text/css">
		.active{
			width: 500px;
			height: 200px;
			background: red;
		}
		.classblue{
			width: 200px;
			height: 50px;
			background: blue;
			color: white;
		}
		.yellow{
		    background: yellow;
		    width: 100px;
		    height: 100px;
		    margin-top: 10px;
		}
		
		.mybox{
			margin-top:10px ;
	        width: 100px;
	        height: 100px;
	        background: red;
	    }
	    .myboxcolor{
	        color: yellow;
	    }
	    .aaa{
	       border: 5px solid #ccc;
	    }
		.bbb{
	        height: 100px;
	    }
	    	
	</style>

	<body>
		<div id="app">
			<h1>条件渲染</h1>
			
			<h2 v-if="ok">Yes</h2>			
			<h2 v-if="ELSE">Yes</h2>
			<h2 v-else>No</h2>
			
			<template v-if="ok">
			  <h1>Title</h1>
			  <p>Paragraph 1</p>
			  <p>Paragraph 2</p>
			</template>
		</div>

	</body>
	
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	

	<script type="text/javascript">
			
		var app =  new Vue({
			el:"#app",
			data:{
				ok:true,
				ELSE:false,
	            a:"red",
	            b:"5px solid #ccc",
	            c:"100px",
	            classObj:{
	                background:"red",
	                border:"5px solid #ccc",
	                width:"100px",
	                
	            },
	            classObj1:{
	            	marginTop:"10px"
	            }
        	}
		});
		
		
	</script>

</html>